<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        制作该项目时遇到的难点和知识点
        1. box-sizing
            改变盒子的模式 ， 盒子模型是 margin + padding + border + 内容 ， 而我们的默认的情况下设置的width其实是内容宽度 ， 因此实际出的长度和宽往往要比设置时定的要大一些
            content-box ： 这个采用的依然是盒子模型 ， 是默认值
            border-box ： 这个设置的时候会自动将将设置width设为整个盒子模型的宽度 ， 也就是包含了margin padding border 内容
            inherit ： 从父元素继承box-sizing
        2. css盒子嵌套导致填充有缝隙的解决方法
            <div class="box2">
                <div class="box3"></div>
            </div>
            <style>
                .box2 {
                    width: 200px;
                    height: 40px;
                    border: 1px red solid;
                }
                .box3 {
                    height: 100%;
                    width: 100%;
                    background-color: black;
                }
            </style>
            比如上面这段代码 ， 显示的效果就是父盒子与子盒子之间存在缝隙 ， 但是设置的长度和宽度都是相同到的
            解决办法 ： 给父盒子style加上  box-sizing: border-box
            但是这个方法在页面放大的情况下也会出现缝隙 ， 所以说治标不治本
            可以使用盒子拼接的方法 ， 这样可以有效的避免出现这样的问题
        3. 搜索图标应该怎么布局
            第一种方法 ：可以将其单独的看为一个块级元素 ， 然后是input ，之后将input的border 和 outline全部隐藏 ， 这样就看其来使在一个盒子中
            第二种方法 ：可以将图片作为input的背景图片 ， 使用background ， 然后再通过设置padding改变光标所在的位置
        4. input的样式应该怎么改变
            光标所在位置： 使用padding
            光标大小： 使用font-size
            边框： border
            点击时出现的边框： outline
            使用input时 ， 默认的input存在一个padding值 ，所以说需要提前将padding设置为0
        5. 元素的分类有哪些
            内联元素/行内元素：
                前后不会产生换行 ，总是和相邻元素在同一行
                设置宽高无效 ， 水平方向的margin ， padding有效 ， 垂直方向的无效
                默认的宽是它自身的内容的宽度
                行内元素只能容纳其他行内元素和文本
                特殊的： a标签内部可以放块级元素 ， 但是不能放置a标签

            块级元素
                总是另起一行
                可以设置宽度高度内外边距
                在不手动设置宽度的时候 ， 默认的宽度视为所在容器的100%
                可以容纳行内元素和块级元素

            行内块级元素
                和相邻行内元素在同一行，但是之间会有空白缝隙。
                默认宽度是他本身内容的宽度。
                宽度、高度、行高、外边距以及内边距都可以手动设置。

        6. 行内元素有哪些 ， 块级元素 ， 行内块级元素有哪些
            行内元素： a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup
            块级元素：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
            行内块级元素： input img
     -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
        }
        .box {
            box-sizing: border-box;
            width: 300px;
            height: 30px;
            /* border: 1px red solid; */
            margin: 10px;
        }
        .box img {
            display: block;
            float: left;
        }
        .search {
            float: left;
            width: 218px;
            height: 28px;
            border: 0;
            outline: 0;
            padding: 0;
            font-size: 20px;
            /* background: url(./image/搜索.png) no-repeat;  */
        }
        .box a {
            display: block;
            float: left;
            width: 50px;
            height: 100%;
            line-height: 30px;
            text-align: center;
            background-color: red;
            color: white;
        }
        .box2 {
            width: 200px;
            height: 40px;
            border: 1px red solid;
            box-sizing: border-box;
            margin-top: 50px;
        }
        .box3 {
            height: 100%;
            width: 100%;
            background-color: black;
        }
        .box4 {
            height: 100%;
            width: 250px;
            box-sizing: border-box;
            border: 1px red solid;
            float: left;
        }

        .Box {
            margin: 20px;
            display: flex;
            width: 300px;
            height: 30px;

        }
        .Search {
            outline: 0;
            background: url(./image/搜索.png) no-repeat;
            padding:0 0 0 35px;
            font-size: 20px;
            width: 210px;
            border: black 1px solid;
        }
        .Box a {
            flex: 1;
            text-align: center;
            line-height: 30px;
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <div class = "box">
        <div class="box4">
            <img src="./image/搜索.png" alt="">
            <input type="text" class="search">
        </div>
        <a href="#">搜索</a>
    </div>

    <div class="box2">
        <div class="box3"></div>
    </div>

    <div class = "Box">
        <input type="text" class="Search">
        <a href="#">搜索</a>
    </div>
</body>
</html>